<template>
	<view>
		<view class="new_tab">
			<view class="navbar">
			  <view
			    v-for="(item, index) in navList"
			    :key="index"
			    class="nav-item"
			    :class="{ current: tabCurrentIndex === index }"
			    @click="tabClick(index)"
			  >
			    {{ item.text }}
			  </view>
			</view>
			<dayList :currentIndex="tabCurrentIndex"></dayList>
			<swiper
			  :current="tabCurrentIndex"
			  class="swiper-box2"
			  duration="300"
			  @change="changeTab"
			  
			>
			  <swiper-item
			    class="tab-content"
			    v-for="(tabItem, tabIndex) in navList"
			    :key="tabIndex"
			  >
			    <scroll-view
			      class="list-scroll-content"
			      scroll-y
			      @scrolltolower="loadData"
			    >
			      <view
			        v-if="
			          tabItem.loadingState != 'first_loading' &&
			          tabItem.balanceList.length == 0
			        "
			        class="empty_part flex_column_start_center"
			      >
			        <text>'还没有数据哦～</text>
			      </view>
			      <template>
			       <view class="interpret_nums">
						<view class="flex_row_between_center">
							<view class="interpret_nums_l">
								<view class="interpret_nums_ln">74</view>
								<view class="interpret_nums_lname">综合分数</view>
							</view>
							<view class="interpret_nums_r flex_row_between_center">
								<view class="interpret_strips" >
									<view class="strip"> 
										<view class="blue":style="{'height':50+'%','background-color':'#f983a4'}"> </view>
									 </view>
									 <view class="strip_n">12</view>
									 <view class="strip_name">爱情</view>
								</view>
								<view class="interpret_strips" >
									<view class="strip"> 
										<view class="blue" :style="{'height':50+'%','background-color':'#fad563'}"> </view>
									 </view>
									 <view class="strip_n">12</view>
									 <view class="strip_name">爱情</view>
								</view>
								<view class="interpret_strips" >
									<view class="strip"> 
										<view class="blue" :style="{'height':50+'%','background-color':'#949ff9'}"> </view>
									 </view>
									 <view class="strip_n">12</view>
									 <view class="strip_name">爱情</view>
								</view>
								<view class="interpret_strips" >
									<view class="strip"> 
										<view class="blue":style="{'height':50+'%','background-color':'#71ebf3'}"> </view>
									 </view>
									 <view class="strip_n">12</view>
									 <view class="strip_name">爱情</view>
								</view>
							</view>
							
						</view>
						<view class="interpret_lunck flex_row_between_center">
							<view class="flex_row_start_center" >
								<image src="../../static/images/other/sign_in.png" class="interpret_lunck_image"></image>
								<view class="interpret_lunck_info">
									<view>白色</view>
									<view>幸运色</view>
								</view>
							</view>
							<view class="flex_row_start_center" >
								<image src="../../static/images/other/sign_in.png" class="interpret_lunck_image"></image>
								<view class="interpret_lunck_info">
									<view>白色</view>
									<view>幸运色</view>
								</view>
							</view>
							<view class="flex_row_start_center" >
								<image src="../../static/images/other/sign_in.png" class="interpret_lunck_image"></image>
								<view class="interpret_lunck_info">
									<view>白色</view>
									<view>幸运色</view>
								</view>
							</view>
						</view>
						<view class="interpert_desc">今天适合争名逐利，努力发掘和实现自己的价值，怒刷存在感。内心积极奋进，富有挑战精神。</view>
						<view class="interpert_evaluate flex_row_between_center">
							<view class="interpert_evaluate_item">
								<view class="interpert_evaluate_item_t">建议</view>
								<view class="interpert_evaluate_item_b">野心勃勃</view>
							</view>
							<view class="interpert_evaluate_item">
								<view class="interpert_evaluate_item_t">避免</view>
								<view class="interpert_evaluate_item_b">职场八卦</view>
							</view>
						</view>
						<view class="interpret_weather flex_row_between_center">
							<view class="interpret_weather_l">
								<text>23:54</text>
								<text>月亮拱水量</text>
							</view>
							<view class="interpret_weather_r">更多天象选择</view>
						</view>
			       </view>
				   <view>
					   <view class="interpert_list_title">心理阅读</view>
					   <view class="interpert_list">
						   <view class="interpert_list_name">内心深处的小黑暗</view>
						   <view class="strip2">
						   	  <view class="blue2":style="{'width':50+'%','background-color':'#71ebf3'}"> </view>
						   </view>
						   <view class="interpert_strip flex_row_between_center">
							   <view>金星拱天</view>
							   <view>已开始3天以上，1天后结束</view>
						   </view>
						   <view class="interpert_strip_desc">
							   这是一个表达浪漫的绝佳时机，能够在公众场合受到较多人的瞩目与祝福。有利于恋情的推进与社交魅力的施展，能够通过他人的欣赏来确认自…全文
						   </view>
					   </view>
				   </view>
			      </template>
			     <!-- <loadingState
			        v-if="
			          tabItem.loadingState == 'first_loading' ||
			          tabItem.balanceList.length > 0
			        "
			        :state="tabItem.loadingState"
			      /> -->
			    </scroll-view>
			  </swiper-item>
			</swiper>
		</view>
				
	</view>
</template>

<script>
	import dayList  from "@/components/xl-day-week-month/xl-day-week-month";
	export default{
		components: {
			dayList
		},
		data(){
			return{
				statusBarHeight:getApp().globalData.statusBarHeight+'px',
				navList: [{
						state: 0,
						text: '日',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
					{
						state: 1,
						text: '周',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
					{
						state: 2,
						text: '月',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
					{
						state: 3,
						text: '年 ',
						loadingState: 'first_loading',
						balanceList: [],
						current: 1, //分页
					},
				],
				tabCurrentIndex:0,
			}
		},
		onLoad(){},
		methods:{
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.new_tab{
		background-color: #fff;
	}
	.navbar {
	  display: flex;
	
	  height: 80rpx;
	  padding: 0 5px;
	  background: #fff;
	  position: relative;
	  z-index: 10;
	
	  .nav-item {
	    // flex: 1;
	    display: flex;
	    justify-content: center;
		width: 100rpx;
	    align-items: center;
	    height: 100%;
	    font-size: 28rpx;
	    position: relative;
	
	    &.current {
	      // color: #93a2ff;
	      font-size: 30rpx;
	
	      &:after {
	        content: '';
	        position: absolute;
	        left: 50%;
	        bottom: 0rpx;
	        transform: translateX(-50%);
	        width: 65rpx;
	        height: 6rpx;
	        background-color: #58bdd3;
	        border-radius: 2rpx;
	      }
	    }
	  }
	}
	
	.uni-swiper-item {
	  height: auto;
	}
	
	.log-item {
	  padding: 30rpx;
	  background: #fff;
	  position: relative;
	
	  &:first-child {
	    margin-top: 4rpx;
	  }
	
	  &.b_b:after {
	    left: 30rpx;
	    right: 30rpx;
	  }
	
	  
	}
	
	
	.swiper-box2 {
	  height: calc(100vh - 88px);
	  // background-color: red;
	}
	.list-scroll-content {
	  height: 100%;
	}
	
	.interpret_nums{
		padding: 20rpx 32rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-image: linear-gradient(to  bottom  ,#e6f7fa 10%,#dff3fe,#e9f8ff,#eaf2ff,#f0f9fc,rgba(246, 251, 254,0.2));
	}
	.interpret_nums_l{
		padding-left: 20rpx;
		text-align: center;
		.interpret_nums_ln{
			font-size: 42px;
			font-weight: bold;
		}
		.interpret_nums_lname{
			font-size: 24rpx;
			font-weight: bold;
		}
		
	}
	.interpret_nums_r{
		padding-right: 32rpx;
	}
	/* 进度条 */
	.interpret_strips{
		margin-right: 75rpx;
		display: flex;
		flex-direction: column ;
		justify-content: center;
		align-items: center;
		&:last-child{
			margin-right: 0;
		}
	}
	.strip {
			/* 父元素相对定位 */
			position: relative;
			width: 12rpx;
			height: 140rpx;
			color: rgba(80, 80, 80, 1);
			background-color: #F5F5F5;
			border-radius: 7rpx;
			font-size: 28rpx;
			line-height: 150%;
			text-align: center;
		}
		.blue {
			width: 12rpx;
			color: rgba(80, 80, 80, 1);
			background-color: #1676FE;
			border-radius: 7rpx;
			font-size: 28rpx;
			position: absolute;
			bottom: 0;
			text-align: center;
		}
		.strip_n{
			margin-top: 10rpx;
			font-size: 26rpx;
			font-weight: bold;
		}
		.strip_name{
			margin-top: 10rpx;
			font-size: 24rpx;
			font-weight: bold;
		}
		
       /* 幸运物*/
	   .interpret_lunck{
		   margin-top: 24rpx;
		   background-color: #fff;
		   padding: 25rpx 24rpx;
		   border-radius: 30rpx;
	   }
	   .interpret_lunck_image{
		   width: 50rpx;
		   height: 50rpx;
	   }
	   .interpret_lunck_info{
		   margin-left: 24rpx;
		   
		   & view:first-child{
			     font-size: 26rpx;
		   }
		   & view:last-child{
		   		color: #bababa;
			    font-size: 22rpx;
				margin-top: 10rpx;
		   }
		   
	   }
	   .interpert_desc{
		   margin-top: 24rpx;
		   background-color: #e7f4fd;
		   border-radius: 30rpx;
		   padding: 25rpx 24rpx;
		   line-height: 22px;
		   font-size: 28rpx;
	   }
	   
	.interpert_evaluate{
		margin-top: 24rpx;
	}
	.interpert_evaluate_item{
		padding: 14rpx 32rpx;
		border-radius: 14rpx;
		width: 48%;
		background-color: #eaf2fd;
	}
	.interpert_evaluate_item_t{
		font-size: 26rpx ;
		position: relative;
		&:after {
		  content: '';
		  position: absolute;
		  left: 0;
		  bottom: -2rpx;
		  width: 65rpx;
		  height: 6rpx;
		  // background-color: #58bdd3;
		  background-image: linear-gradient(to right ,#58bdd3,#e9f3fd);
		  border-radius: 2rpx;
		}
	}
	.interpert_evaluate_item_b{
		font-size: 24rpx;
		margin-top: 24rpx;
	}
	.interpret_weather{
		margin-top: 24rpx;
		background-color: #ebf5fe;
		padding: 25rpx 24rpx;
		border-radius: 30rpx;
	}
	.interpret_weather_r{
		font-size: 22rpx;
		color: #8cd0dd;
	}
	.interpret_weather_l{
		& text:first-child{
			font-size: 22rpx;
		}
		& text:last-child{
			font-size: 26rpx;
			color: #5193d6;
			margin-left: 12rpx;
		}
	}
	.interpert_list_title{
		font-size: 30rpx;
		padding-left: 24rpx;
		margin-bottom: 16rpx;
		position: relative;
		&:after {
		  content: '';
		  position: absolute;
		  left: 24rpx;
		  bottom: -2rpx;
		  width: 105rpx;
		  height: 16rpx;
		  background-color: #58bdd3;
		  opacity: 0.1 ;
		  border-radius: 2rpx;
		}
	}
	.interpert_list{
		padding: 20rpx 24rpx;
		border-radius: 30rpx;
		margin: 10rpx 24rpx;
		background-image: linear-gradient(to bottom ,#f1ffff 16%,#f4ffff 50%,);
	}
	.interpert_list_name{
		margin-bottom: 14rpx;
	}
	.interpert_strip{
		font-size: 22rpx;
		margin-top: 6rpx;
		& view:first-child{
			color: #989a99;
		}
		& view:last-child{
			color: #91f1fb;
		}
	}
	.interpert_strip_desc{
		margin-top: 14rpx;
		font-size: 26rpx;
		margin-bottom: 24rpx;
	}
	.strip2 {
			/* 父元素相对定位 */
			position: relative;
			width: 360rpx;
			height: 18rpx;
			color: rgba(80, 80, 80, 1);
			background-color: #F5F5F5;
			border-radius: 7rpx;
			font-size: 28rpx;
			line-height: 150%;
			// text-align: center;
		}
		.blue2 {
		    height: 18rpx;
			color: rgba(80, 80, 80, 1);
			background-color: #1676FE;
			border-radius: 7rpx;
			font-size: 28rpx;
			line-height: 150%;
			text-align: center;
		}
</style>